{% load static %}

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
 
<head>
    <meta charset="utf-8">
    <title> 必过通原-搜题库 </title>
    <!-- Add lightGallery CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css" />

    <!-- Add required JavaScript libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>

    <!-- Add required JavaScript libraries -->
    <!-- <script
    src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
    crossorigin="anonymous"></script> -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="shortcut icon" type="image/x-icon" href="https://mybog.s3.ladydaily.com/imgs/x_icon.png">
    <link rel="stylesheet" type="text/css" href="https://mybog.s3.ladydaily.com/css/nes_min.css">
    <link rel="stylesheet" type="text/css" href="https://mybog.s3.ladydaily.com/css/style.css">
    <link rel="stylesheet" type="text/css" href="https://mybog.s3.ladydaily.com/css/mobile_style.css" media="screen and (max-width: 450px)">
</head>
 
<body class="main-content">
  <div id="container">
    <div class="title">
      <a href="https://github.com/MGod-monkey/Must_Pass_Experiment_of_TY">
        必过通原-搜题库
      </a>
    </div>
    <a href="https://github.com/MGod-monkey/Must_Pass_Experiment_of_TY" target="_blank" rel="noopener" id="github_link" class="github-link active">
      <p class="nes-balloon from-right">About me<br>on GitHub</p> 
      <i class="nes-octocat animate"></i>
    </a>
    <div class="tip" style="margin:0 auto;width: 100%;">
      <p class="nes-text is-success" style="text-align: center">本题库共收录<span class="nes-text is-error"> 300+ </span>道原题</p>
      <p class="nes-text is-success" style="text-align: center">搜索框支持题目/选项模糊搜索</p> 
    </div>
    <form method="GET" action="{% url 'search' %}">
      <div class="nes-field is-inline">
          <input type="text" id="dark_field" class="nes-input is-dark" name="inputs" placeholder="请输入关键词">
          <button type="submit"  id="search-btn" class="nes-btn is-primary is-inline", onclick="search()">
            <svg t="1677487166447" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3054" width="48" height="48"><path d="M554.666667 853.333333C330.666667 853.333333 149.333333 672 149.333333 448S330.666667 42.666667 554.666667 42.666667s405.333333 181.333333 405.333333 405.333333-181.333333 405.333333-405.333333 405.333333z m0-725.333333c-177.066667 0-320 142.933333-320 320s142.933333 320 320 320 320-142.933333 320-320S731.733333 128 554.666667 128z" fill="#4E4E4E" p-id="3055"></path><path d="M349.866667 435.2c-4.266667 0-8.533333 0-12.8-2.133333-23.466667-6.4-34.133333-32-27.733334-53.333334 21.333333-68.266667 68.266667-125.866667 132.266667-157.866666 21.333333-10.666667 46.933333-2.133333 57.6 19.2s2.133333 44.8-17.066667 55.466666c-42.666667 23.466667-76.8 61.866667-89.6 108.8-8.533333 17.066667-25.6 29.866667-42.666666 29.866667z" fill="#FF9813" p-id="3056"></path><path d="M85.333333 960c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l213.333333-213.333334c17.066667-14.933333 44.8-12.8 59.733333 4.266667 12.8 14.933333 12.8 40.533333 0 55.466667l-213.333333 213.333333c-8.533333 8.533333-19.2 12.8-29.866667 12.8z" fill="#4E4E4E" p-id="3057"></path></svg>
          </button>
      </div>
    </form>
    <div class="nes-table-responsive" style="position: relative; margin-top: 0.5rem;">
      <table class="nes-table is-bordered is-dark" id="search-results", style="margin:0 auto;">
      <thead>
        <tr>
          <th>序号</th>
          <th>题型</th>
          <th>问题</th>
          <th>答案</th>
          <th>选项A</th>
          <th>选项B</th>
          <th>选项C</th>
          <th>选项D</th>
        </tr>
      </thead>
      <tbody id="tbody">
          {% for result in results %}
              <tr>
                  <td>{{ result.QNumber }}</td>
                  <td>{{ result.AnswerType }}</td>
                  <td>{{ result.Question }}</td>
                  <td>{{ result.Answer }}</td>
                  <td>{{ result.OptionA }}</td>
                  <td>{{ result.OptionB }}</td>
                  <td>{{ result.OptionC }}</td>
                  <td>{{ result.OptionD }}</td>
              </tr>
          {% endfor %}
      </tbody>
      </table>
    </div>
  </div>
  {% if images %}
    <div class="lightgallery" style="text-align: center;">
        {% for image in images %}
            <a href="{{ image }}" data-sub-html="<h4>实验报告图片</h4>">
                <img src="{{ image }}" alt="实验报告图片" width="300" style="margin: 10px;">
            </a>
        {% endfor %}
    </div>
  {% endif %}
  <button type="button" id="scrollBtn" class="nes-btn is-error scroll-btn" style="-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);">
    <span>&lt;</span>
  </button>
</body>
{% verbatim %}
<script>
  //一键致顶功能
  // 获取需要操作的元素
  const scrollBtn = document.getElementById('scrollBtn');
  const githubLink = document.getElementById('github_link');
  // 为按钮或图片添加点击事件监听器
  scrollBtn.addEventListener('click', () => {
    // 点击事件处理程序中，使用window.scrollTo()方法将网页滚动回顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 平滑滚动
    });
  });

  // 监听页面滚动事件
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 0) { // 向下滚动时
      // 移除 a 元素的 active 类
      githubLink.classList.remove('active');
      // 添加 button 元素的 active 类
      scrollBtn.classList.add('active');
    } else { // 向上滚动时
      // 移除 button 元素的 active 类
      scrollBtn.classList.remove('active');
      // 添加 a 元素的 active 类
      githubLink.classList.add('active');
    }
  });

  function search() {
    var keyword = document.getElementById("dark_field").value;
    if (keyword === "") {
      alert("输入框不能为空！");
      return;
    }
    // 搜索题库
    var results = '{{ results|safe }}';
    if (results == ''){
      alert("未找到原题或solr服务器未开启");
      return;
    }
    var table = document.getElementById('search-results');
    var tbody = table.getElementsByID('tbody')[0];
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var row = tbody.insertRow(i);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        cell1.innerHTML = result.QNumber;
        cell2.innerHTML = result.AnswerType;
        cell3.innerHTML = result.Question;
        cell4.innerHTML = result.Answer;
        cell5.innerHTML = result.OptionA;
        cell6.innerHTML = result.OptionB;
        if ('OptionC' in result) {
            cell7.innerHTML = result.OptionC;
        } else {
            cell7.innerHTML = '';
        }
        if ('OptionD' in result) {
            cell8.innerHTML = result.OptionD;
        } else {
            cell8.innerHTML = '';
        }
    }
  }
  // 实验报告图片演示
  $(document).ready(function() {
      $(".lightgallery").lightGallery({
          thumbnail: true,
          animateThumb: false,
          showThumbByDefault: false,
          selector: 'a'
      });
  });
</script>
{% endverbatim %}
 
</html>
